<template>
  <div class="profile">
    <el-card class="profile-card">
      <div slot="header" class="profile-header">
        <el-avatar :src="avatar" size="large"></el-avatar>
        <div class="profile-name">个人中心</div>
      </div>
      <div class="profile-body">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="个人资料修改">
            <el-form :model="userInfo" :rules="rules" ref="userInfo" label-width="100px">
              
             <el-form-item label="用户ID" prop="userID">
                <el-input v-model="userInfo.userID"></el-input>
              </el-form-item>
			  <el-form-item label="用户名" prop="username">
			    <el-input v-model="userInfo.username" ></el-input>
			  </el-form-item>
			  <el-form-item label="密码" prop="password">
			    <el-input type="password" v-model="userInfo.password" ></el-input>
			  </el-form-item>
              <el-form-item label="手机号" prop="userPhoneNumber">
                <el-input v-model="userInfo.userPhoneNumber"></el-input>
              </el-form-item>
			  <el-form-item label="邮箱" prop="userEmail">
			    <el-input v-model="userInfo.userEmail" ></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('userInfo')">保存</el-button>
			  </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="修改密码">
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
				<el-form-item label="用户名" prop="oldUsername">
				  <el-input type="text" v-model="passwordForm.oldUsername"></el-input>
				</el-form-item>
              <el-form-item label="旧密码" prop="oldPassword">
                <el-input type="password" v-model="passwordForm.oldPassword"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="passwordForm.newPassword"></el-input>
                <p :style="{ visibility: passwordForm.newPassword ? 'visible' : 'hidden', color: passwordForm.passwordStrengthColor }">{{ passwordForm.passwordStrengthMessage }}</p>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="modifyForm">修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  watch: {
  'passwordForm.newPassword': function (newPassword) {
    let strength = 0;
    if (newPassword.length >= 8) strength++;
    if (/\d/.test(newPassword)) strength++;
    if (/[A-Z]/.test(newPassword)) strength++;
    if (/[a-z]/.test(newPassword)) strength++;
    if (/[\W_]/.test(newPassword)) strength++;

    if (strength >= 4) {
      this.passwordForm.passwordStrengthMessage = "密码有效，复杂度：高";
      this.passwordForm.passwordStrengthColor = "#05b92c";
    } else if (strength === 3) {
      this.passwordForm.passwordStrengthMessage = "密码有效，复杂度：中";
      this.passwordForm.passwordStrengthColor = "orange";
    } else if (strength === 2) {
      this.passwordForm.passwordStrengthMessage = "密码有效，复杂度：低，建议添加数字或特殊符号";
      this.passwordForm.passwordStrengthColor = "red";
    } else {
      this.passwordForm.passwordStrengthMessage = "密码无效。密码长度至少为 8 位，并且必须包含一个小写字母、大写字母和一个符号。";
      this.passwordForm.passwordStrengthColor = "red";
    }
  }
},
  data() {
    return {
      activeTab: '1',
      formData: {
        username: '',
        id: '',
        phone: '',
        passwordStrengthMessage: '', // 密码强度提示信息
        passwordStrengthColor: '', // 密码强度提示颜色
		    email:''
      },
      passwordRules: {
      oldUsername: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      oldPassword: [
        { required: true, message: '请输入旧密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 8, max: 20, message: '密码长度在8到20个字符之间', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        { validator: this.validateConfirmPassword, trigger: 'blur' }
      ]
    },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ]
      },
	  
	  userInfo:{
		  userID:'',
		  username:'',
		  password:'',
		  userPhoneNumber:'',
		  userEmail:''
	  },
	  
      passwordForm: {
		oldUsername:'',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
		  oldSuername: [
		    { required: true, message: '请输入用户名', trigger: 'blur' }
		  ],
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
         // { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
         // { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      },
      avatar: 'https://avatars.githubusercontent.com/u/125264?s=200&v=4',
      //name: 'admin'
    }
  },
  methods: {
    submitForm(formName) {
		this.axios.post("UsersModify",this.userInfo)
		.then(
			response=>{
				if (response.data.code === 200) {  
					this.$message({
					  message: response.data.message,  
					  type: 'success'  
					});  
				}else{
					this.$message({
					  message: response.data.message,  
					  type: 'warning' ,
					  });  
				}
			}
		)
          .catch(error => {  
                  console.error(error);  
                  this.$message({  
                  message: error.response.data.message,  
                  type: 'error'  
                  });  
              });  
        
    },
	
	modifyForm(){
		let params = {
		     username: this.passwordForm.oldUsername,  
		     password: this.passwordForm.oldPassword,
			 newPassword:this.passwordForm.newPassword,
			 confirmPassword:this.passwordForm.confirmPassword
		 };  
		    	   
		 this.axios.get('UsersModifyPassword', { params: params })  
		.then(response => {  
		   if (response.data.code === 200) {  
		     this.$message({  
		       message: response.data.message,  
		       type: 'success'  
		     });  
		       
		   } else {  
		     this.$message({  
		       message: response.data.message,  
		       type: 'warning'  
		     });  
		   }  
		 })  
		.catch(error => {  
		   console.error('修改时发生错误：', error);  
		   this.$message({  
		     message: '修改出错，请稍后再试',  
		     type: 'error'  
		   });  
		 });  
	},
	
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
  }
}
</script>

<style scoped>
.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.profile-card {
  width: 800px;
}

.profile-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.profile-name {
  font-size: 24px;
  margin-left: 20px;
}

.profile-body {
  padding: 20px;
}
</style>